<script lang="ts" setup>
import * as echarts from 'echarts'
import { chinaMap } from '@/assets/chinaMap'
import { onMounted, ref } from 'vue'

const mapContainer = ref()
const initMap = () => {
  const chinaCharts = echarts.init(mapContainer.value)
  echarts.registerMap('chinaMap', chinaMap as any)
  let option = {
    geo: {
      // 地理坐标组件
      type: 'map',
      map: 'chinaMap',
      zoom: 1.25,
      roam: true
    }
  }
  chinaCharts.setOption(option)
}
onMounted(() => {
  initMap()
})
</script>

<template>
  <div class="map-container" ref="mapContainer"></div>
</template>

<style lang="scss" scoped></style>
